<template>
  <el-dialog
    :title="`SKU列表 => ${spuName}`"
    :visible.sync="visible"
    width="50%"
  >
    <el-table
      v-loading="loading"
      :data="skuList"
      border
      style="width: 100%"
      max-height="300px"
    >
      <el-table-column label="SPU名称" prop="skuName" width="150" />
      <el-table-column label="价格(元)" prop="price" width="80" />
      <el-table-column label="重量(KG)" prop="weight" width="80" />
      <el-table-column label="默认图片" prop="skuDefaultImg">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" alt="row.skuName">
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { reqGetSkuList } from '@api/sku'

export default {
  name: 'SkuList',
  data() {
    return {
      visible: false,
      skuList: [],
      spuName: '',
      loading: false
    }
  },
  mounted() {
    this.$bus.$on('receiveVisible', this.receiveVisible)
  },
  methods: {
    async receiveVisible({ spuId, spuName }) {
      this.visible = true
      this.spuName = spuName
      this.loading = true
      const res = await reqGetSkuList(spuId)
      this.skuList = res.data
      this.loading = false
    }
  }
}
</script>

<style lang="sass" scoped>
</style>
